<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>

        #shadow_box {
            display: none;
            width: 100%;
            height: 100%;

            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;

            z-index: 99;
            background: rgba(0, 0, 0, 0.5);        /*   背景颜色 半透明  */
        }


        #alert {
            display: none;
            width: 800px;
            height: 300px;
            background-color: pink;

            position: fixed;
            top: 30px;
            right: 50px;

            z-index: 1000;
        }


    </style>


    <title>Document</title>

    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

</head>

<body>


<h1>按下回车键弹出模态框</h1>



<div id="shadow_box"></div>          <!--   半透明背景  -->
<!--    粉色框     -->
<div id="alert">
    <h1> 这个一定要放在最外层的div , 否则会以外层为父元素 , 那样就没办法以浏览器窗口进行定位了</h1>
    <h2>https://github.com/chokcoco/iCSS/issues/24</h2>
</div>


<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>10</p><p>11</p><p>12</p><p>13</p><p>14</p><p>15</p><p>16</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p><p>aaa</p>
<h1 id="test001">h1h1h1h1h1h1h1h1h1h1h1</h1>


</body>

<script type="text/javascript">


    // 按下 enter 键触发事件
    var keyUp = function (e) {
        var currKey = 0, e = e || event;
        currKey = e.keyCode || e.which || e.charCode;
        // var keyName = String.fromCharCode(currKey);

        if (currKey === 13) {

            $("#alert").toggle();

            // 如果是调出了模态框 -> 就禁止滑动
            if(document.getElementById("alert").style.display === 'block'){
               stopBodyScroll();
               document.getElementById("shadow_box").style.display = "block";
            }

            // 如果是隐藏了模态框 -> 就允许滑动
            if(document.getElementById("alert").style.display === 'none'){
                allow_slide();
                document.getElementById("shadow_box").style.display = "none";
            }
        }
    };
    document.onkeyup = keyUp;


    //  开启页面滚动
    function allow_slide(){
        document.body.style.overflow = "auto";
    }

    // 禁止页面滚动
    function stopBodyScroll (isFixed) {
        document.body.style.overflow = "hidden";
    }


</script>

</html>